<!--
 * @Descripttion:
 * @version:
 * @Author: tanghao1
 * @Date: 2021-02-03 13:57:58
 * @LastEditors: tanghao1
 * @LastEditTime: 2021-03-16 15:31:30
-->
<template>
  <el-dialog
    ref="refDlg"
    :title="detailData===''? '新增页面' : '编辑页面'"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :hide-func-bar="true"
    :before-close="clearForm"
    width="600px"
    @close="closeDialog"
  >
    <div>
      <el-form ref="form" :model="formData" :rules="formRules" size="mini" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="模板名称" prop="name" :rules="name">
              <el-input v-model="formData.name" size="mini" placeholder="请输入模板名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="筛选数据来源" prop="dataComeFrom" :rules="dataComeFrom">
              <el-select
                v-model="formData.dataComeFrom"
                size="mini"
                placeholder="请选择"
                :rules="gotoType"
              >
                <el-option
                  v-for="item in screenDataFormList"
                  :key="item.dictId"
                  :label="item.dictName"
                  :value="item.dictName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="formData.remark"
                type="textarea"
                :rows="4"
                size="mini"
                placeholder="请输入备注"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer">
      <el-button size="mini" @click="closeDialog">取消</el-button>
      <el-button size="mini" type="primary" @click="submitForm">保存</el-button>
      <el-button size="mini" type="primary" @click="submitFormtomodel">保存并去配置模板</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getDictBySelect } from '@/api/dataDict'
import { saveScreennew, saveScreenedit } from '@/api/shopauxPlat/screenTemplate' // 新增/编辑-保存
export default {
  name: 'PageEditForm',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      isEdit: true,
      submiting: false,
      pricingTypeCodeList: [], // 因子类型
      screenDataFormList: [], // 筛选数据来源
      formData: {
        name: '',
        dataComeFrom: '',
        remark: '',
        state: '1'
      },
      formRules: {
        name: [{
          required: true,
          message: '请输入模板名称',
          trigger: 'blur'
        }],
        dataComeFrom: [{
          required: true,
          message: '请选择筛选数据来源',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    const data = this.detailData
    if (data) {
      this.formData = Object.assign({}, data)
    } else {
      this.isEdit = false
    }
    // 初始化数据字典数据
    this.initAuditResult()
  },
  methods: {
    closeDialog() {
      this.dialogShow = false
    },
    // 提交表单处理
    submitForm() {
      if (this.formData.name === '') {
        this.$message.warning('模板名称不能为空')
        return false
      }
      if (this.formData.dataComeFrom === '') {
        this.$message.warning('筛选数据来源不能为空')
        return false
      }
      if (this.formData.id) { // 编辑保存
        saveScreenedit(this.formData).then(res => {
          if (res.success === 1) {
            this.$message.success('保存成功')
            this.dialogShow = false
            this.$emit('refreshTable')
          }
        })
      } else {
        saveScreennew(this.formData).then(res => {
          if (res.success === 1) {
            this.$message.success('保存成功')
            this.dialogShow = false
            this.$emit('refreshTable')
          }
        })
      }
    },
    // 保存并去配置模板
    submitFormtomodel() {
      if (this.formData.name === '') {
        this.$message.warning('模板名称不能为空')
        return false
      }
      if (this.formData.dataComeFrom === '') {
        this.$message.warning('筛选数据来源不能为空')
        return false
      }
      const saveData = this.formData.id ? saveScreenedit : saveScreennew
      saveData(this.formData).then(res => {
        if (res.success === 1) {
          this.$message.success('保存成功')
          this.dialogShow = false
          this.$emit('refreshTabletomodel', this.detailData)
        }
      })
    },
    // 数据字典获取 筛选数据来源
    initAuditResult() {
      getDictBySelect({
        dictTypeCode: 'FILTER_DATA_SOURCES',
        appCode: 'sad',
        domainCode: 'marketing'
      }).then(res => {
        this.screenDataFormList = res
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.el-col el-col-11{margin-bottom: 20px;}
 .avatar-uploader .el-upload {
    border: 1px dashed #181717;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>
